<template>
  <div class="center" id="size">
    <h1>登录/注册</h1>
    <div class="logon">
      <div :class="overlaylong">
        <div class="overlaylong-Signin" v-if="disfiex === 0">
          <h2 class="overlaylongH2">登录</h2>
          <input type="text" placeholder="用户名" v-model="account.phoneNumber">
          <input type="password" placeholder="密码" v-model="account.password">
          <h3>忘记密码？</h3>
          <button class="inupbutton" @click="login">登录</button>
          <el-button @click="test">
            test
          </el-button>
        </div>
        <div class="overlaylong-Signup" v-if="disfiex === 1">
          <h2 class="overlaylongH2">注册账户</h2>

          <!-- 手机号输入框 - 在未验证前可见 -->
          <input type="text" placeholder="请输入手机号" v-model="signUpForm.phoneNumber" v-if="showPhoneNumberInput"
            @keyup.enter="sendSignUpCode" />
          <button class="inupbutton" @click="sendSignUpCode" v-if="!codeSent">获取验证码</button>

          <!-- 验证码输入框 -->
          <input type="text" placeholder="请输入验证码" v-model="signUpForm.signUpCode" v-if="codeSent" />

          <!-- 隐藏手机号输入框，但保留其值 -->
          <input type="text" placeholder="请输入手机号" v-model="signUpForm.phoneNumber" v-if="codeSent"
            style="display: none;" />

          <input type="text" placeholder="请输入姓名" v-model="signUpForm.name" v-if="codeSent" />
          <input type="text" placeholder="请输入密码" v-model="signUpForm.password" v-if="codeSent" />
          <button class="inupbutton" @click="signUp" v-if="codeSent">注册</button>
        </div>
      </div>
      <div :class="overlaytitle">
        <div class="overlaytitle-Signin" v-if="disfiex === 0">
          <h2 class="overlaytitleH2">你好，朋友！</h2>
          <p class="overlaytitleP">输入您的个人信息并开始与我们一起的旅程</p>
          <div class="buttongohs" @click="animatiedToSignUp">注册</div>
        </div>
        <div class="overlaytitle-Signup" v-if="disfiex === 1">
          <h2 class="overlaytitleH2">欢迎回来！</h2>
          <p class="overlaytitleP">为了保持联系，请使用您的个人信息登录</p>
          <div class="buttongohs" @click="animatiedToLogin">登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      account: {
        phoneNumber: "",
        password: "",
      },
      signUpForm: {
        name: '',
        password: '',
        phoneNumber: '',
        signUpCode: '',
      },
      overlaylong: 'overlaylong',
      overlaytitle: 'overlaytitle',
      disfiex: 0,
      codeSent: false // 是否已发送验证码
      ,showPhoneNumberInput: false, // 是否显示手机号输入框
// 是否已验证验证码
    }
  },
  methods: {
    test(){
      const account = localStorage.getItem('currentAccountName')
      console.log(account)
    },
    // 登录方法
    login() {
      if (this.account.phoneNumber === "" || this.account.password === "") {
        alert("请输入账号和密码")
        return
      }
      console.log(this.account)
      this.$http.post('/tAccount/login', {

          phoneNumber: this.account.phoneNumber,
          password: this.account.password

      }
      ).then(resp => {
        console.log(resp)
        localStorage.setItem('currentAccountName',resp.data.data.name)
        //登录成功 判断角色 选择跳转页面
        if(resp.data.data.role.roleName=='用户'){
            this.$router.push("/UserInterface");
        }else if(resp.data.data.role.roleName=='科特派'){
            this.$router.push("/staffInterface");
        }else if(resp.data.data.role.roleName=='管理员'||resp.data.data.role.roleName=='超级管理员'){
          this.$router.push("/AdminPage");
        }
      })
    }
    ,sendSignUpCode() {
      if(this.signUpForm.phoneNumber === "") {
        alert("请输入手机号")
        return
      }
      const phoneNumberReg = /^1[3-9]\d{9}$/;
      if(!phoneNumberReg.test(this.signUpForm.phoneNumber)) {
        alert("请输入正确的手机号")
        return
      }
      this.codeSent = true
      this.$http.get('/tAccount/sendSignUpCode',{
        params:{
          phoneNumber: this.signUpForm.phoneNumber
        }
      }).then(resp => {
        console.log(resp)
        if(resp.data.code === 200) {
          this.signUpForm.signUpCode = resp.data.data
        } else {
          alert(resp.data.message)
        }
      })
    },
    signUp(){
      if(this.signUpForm.name === "" || this.signUpForm.password === "") {
        alert("请输入姓名、密码")

      }
      this.$http.post('/tAccount/signUp', {
        name: this.signUpForm.name,
        password: this.signUpForm.password,
        phoneNumber: this.signUpForm.phoneNumber,
        signUpCode: this.signUpForm.signUpCode,
        roleId: 4
      }).then(resp => {
        console.log(resp)
        if(resp.data.code === 200) {
          alert("注册成功")
          this.animatiedToLogin()
        } else {
          alert(resp.data.message)
        }
      })
    }
    // 切换到注册界面
    , animatiedToSignUp() {
      this.overlaylong = "overlaylongleft";
      this.overlaytitle = "overlaytitleright";

      setTimeout(() => {
        this.disfiex = 1;
      }, 200);
      this.showPhoneNumberInput = true;
    },

    // 切换到登录界面
    animatiedToLogin() {
      this.showPhoneNumberInput = false;
      this.codeSent = false;
      this.overlaylong = "overlaylongright";
      this.overlaytitle = "overlaytitleleft";
      setTimeout(() => {
        this.disfiex = 0;
      }, 200);
    }
  }
}
</script>

<style>
.center {
  width: 100vw;
  height: 100vh;
  background-image: url(../../static/Login_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

h1 {
  font-size: 2vw;
  color: black;
}

.logon {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 80vw;
  max-width: 768px;
  min-height: 480px;
  margin-top: 20px;
  display: flex;
  background: linear-gradient(to right, #4284db, #29eac4);
}

.overlaylong,
.overlaylongleft,
.overlaylongright {
  border-radius: 10px 0 0 10px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease-in-out;
}

.overlaylongleft {
  transform: translateX(100%);
}

.overlaylongright {
  transform: translateX(0%);
}

.overlaytitle,
.overlaytitleleft,
.overlaytitleright {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease-in-out;
}

.overlaytitleleft {
  transform: translateX(0%);
}

.overlaytitleright {
  transform: translateX(-100%);
}

.overlaytitleH2 {
  font-size: 2vw;
  color: #fff;
  margin-top: 20px;
}

.overlaytitleP {
  font-size: 1vw;
  color: #fff;
  margin-top: 20px;
}

.buttongohs {
  width: 180px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 1vw;
  text-align: center;
  line-height: 40px;
  margin-top: 40px;
  cursor: pointer;
}

.overlaylongH2 {
  font-size: 1.5vw;
  color: black;
}

input {
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 10px 0;
  width: 240px;
}

h3 {
  font-size: 0.8vw;
  margin-top: 10px;
  cursor: pointer;
}

.inupbutton {
  background-color: #29eac4;
  border: none;
  width: 180px;
  height: 40px;
  border-radius: 50px;
  font-size: 1vw;
  color: #fff;
  text-align: center;
  line-height: 40px;
  margin-top: 30px;
  cursor: pointer;
}
</style>
